@mixin center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}

$height: 100%;
$width: 100%;

@media only screen and (min-width: 900px) {
  .yl-container {
    height: 100%;
    width: $width;
    position: relative;

    .yl-login-left {
      position: absolute;
      top: 60%;
      left: 30%;
      transform: translate(-50%, -30%);
      margin: auto;

      img {
        width: 600px;
        object-fit: cover;
      }
    }

    .yl-login-right {
      float: right;
      margin-top: 15%;
      margin-right: 2%;
      text-align: center;

      img {
        width: 100px;
      }

      h3 {
        text-align: center;

        font: {
          weight: 700;
          size: 1.5em;
        }
      }

      .el-form {
        margin-top: 20px;

        .el-form-item__content {
          margin: 0 !important;
          width: 25em;

          input {
            border: 0;
            border-radius: 0;
            border-bottom: 2px solid rgba($color: #000000, $alpha: 0.32);

            &:focus {
              transition: .5s ease-in-out;
              border-bottom: 2px solid rgba($color: #409EFF, $alpha: 1.0);
            }
          }

          .el-button {
            font: {
              weight: 700;
              size: 20px;
            }
          }
        }
      }
    }

    .yl-main {
      .yl-card-top {
        min-height: 60px;
        background-color: #ffffff;

        display: flex;

        .el-avatar {
          align-self: center;
          width: 40px;
          height: 40px;
          margin: 0 20px;
        }

        p {
          align-self: center;
          text-align: center;

          span {
            &:first-child {
              display: inline-block;
              margin-bottom: 5px;

              font: {
                size: 16px;
                weight: 700;
                family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
              }

              ;
            }

            &:last-child {
              display: inline-block;
              margin-top: 5px;

              font: {
                size: 11px;
              }
            }
          }
        }
      }

      .yl-card-box {
        margin-top: 20px;

        .yl-card-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          li {
            min-width: 25%;

            .yl-card-item {

              margin-bottom: 10px;
              margin-right: 4px;
              height: 5em;
              line-height: 5em;

              background-color: #ffffff;
              transition: all .3s ease-in-out;

              &:hover {
                box-shadow: 0px 0px 5px 0px #808080;

                .yl-flex-icon {
                  transition: all .3s ease-in;
                  border-radius: 10px
                }

                .yl-ecs-people {
                  background-color: #0079fe;
                  color: #ffffff
                }

                .yl-ecs-liulanliang {
                  background-color: #ff8d00;
                  color: #ffffff
                }

                .yl-ecs-money {
                  background-color: #f56c6c;
                  color: #ffffff
                }

                .yl-ecs-gouwuche {
                  background-color: #67c23a;
                  color: #ffffff
                }
              }

              h3 {
                line-height: 2.5;

                font: {
                  size: 17px;
                }

                border-bottom: 2px solid rgba(245, 245, 245, 1);

                span {
                  margin-left: 10px
                }
              }

              /* 图标 */
              .yl-flex-icon {
                font-size: 40px;
                margin-left: 10px;
                padding: 10px;
              }

              .yl-ecs-people {
                color: #0079fe;
              }

              .yl-ecs-liulanliang {
                color: #ff8d00;
              }

              .yl-ecs-money {
                color: #f56c6c;
              }

              .yl-ecs-gouwuche {
                color: #67c23a;
              }

              /* 标题 */
              .yl-card-info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                float: right;
                height: 100%;
                margin-right: 20px;

                p {
                  line-height: 1;

                  &:first-child {
                    margin-bottom: 10px;

                    font: {
                      size: 18px;
                      weight: 700;
                    }

                    color: darkgray;
                  }

                  &:last-child {
                    font: {
                      size: 16px;
                      weight: 600;
                    }

                    ;
                  }
                }
              }
            }

            &:nth-last-child(4n+1) {
              .yl-card-item {
                margin-right: 0px;
              }
            }
          }
        }
      }

      .yl-chart-box {
        margin-top: 20px;

        .yl-chart-item {
          background-color: #ffffff;
          margin-bottom: 20px;

          &:nth-child(2) {
            margin-right: 15px;
          }
        }

        .yl-pie-chart,
        .yl-column-chart {
          display: inline-block;
          width: 49%;
        }
      }

      .yl-search-list {
        .el-form {
          .el-form-item {
            margin-bottom: 10px;
          }
        }
      }

      .yl-btn-group {
        margin-bottom: 10px;
      }

      .yl-table-list {
        .el-table {
          margin-bottom: 0;
          border-radius: 15px;
          width: 100%;
        }
      }
    }
  }

  .yl-home-page {
    height: $height;
    width: $width;
    position: relative;

    .el-container {
      width: $width;
      height: $height;

      .yl-flex-container {
        display: flex;
        flex-direction: column;

        .el-header {
          height: 60px;
          width: 100%;

          .el-col {
            height: 100%
          }

          .el-col.yl-col-dropdown {
            text-align: right;
            line-height: 60px;
          }
        }

        .el-header,
        .el-main {
          padding-top: 0;
          background-color: #eff0f0;
        }
      }

      .yl-aside-width {
        min-width: 200px;
      }

      .el-aside {
        background-color: #474281;

        .el-menu {
          border: none;

          .child-submenu {
            .el-submenu {
              .el-submenu__title {
                background-color: rgba($color: #3d3d70, $alpha: 1.0) !important;
              }
            }
          }

          .el-menu.el-menu--inline {
            .el-menu-item {
              background-color: rgba($color: #3d3d70, $alpha: 1.0) !important;
            }
          }

          .el-menu-item.is-active {
            color: rgba($color: #4da2dc, $alpha: 1.0);

            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              background: #4ea8e2;
              height: 100%;
              width: 3px;
            }
          }
        }

        .yl-flex-icon {
          position: relative;
          text-align: center;

          img {
            border-radius: 50px;
            object-fit: cover;
            margin-top: 40px;
            transition: all 0.5s ease-in-out;

            &:hover {
              transform: rotate(360deg);
            }
          }

          p {
            margin: 20px 0;
            color: #fff;

            font: {
              size: 20px;
              weight: 700;
              family: SourceHanSansCN-Bold, SourceHanSansCN;
            }

            ;
          }
        }
      }
    }
  }
}

@media(min-width: 1366px) and (max-width: 1439px) {
  .yl-container {
    height: 100%;
    width: $width;
    position: relative;

    .yl-login-left {
      position: absolute;
      top: 50%;
      left: 30%;
      transform: translate(-50%, -30%);
      margin: auto;

      img {
        width: 700px;
        object-fit: cover;
      }
    }

    .yl-login-right {
      float: right;
      margin-top: 6%;
      margin-right: 5%;
      text-align: center;

      img {
        width: 120px;
      }

      h3 {
        text-align: center;

        font: {
          weight: 700;
          size: 2.5em;
        }
      }

      .el-form {
        margin-top: 20px;

        .el-form-item__content {
          margin: 0 !important;
          width: 30em;

          input {
            border: 0;
            border-radius: 0;
            border-bottom: 2px solid rgba($color: #000000, $alpha: 0.32);

            &:focus {
              transition: .5s ease-in-out;
              border-bottom: 2px solid rgba($color: #409EFF, $alpha: 1.0);
            }
          }

          .el-button {
            font: {
              weight: 700;
              size: 20px;
            }
          }
        }
      }
    }

    .yl-main {
      .yl-card-top {
        min-height: 70px;
        background-color: #ffffff;

        display: flex;

        .el-avatar {
          align-self: center;
          width: 50px;
          height: 50px;
          margin: 0 20px;
        }

        p {
          align-self: center;
          text-align: center;

          span {
            &:first-child {
              display: inline-block;
              margin-bottom: 5px;

              font: {
                size: 20px;
                weight: 700;
                family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
              }

              ;
            }

            &:last-child {
              display: inline-block;
              margin-top: 5px;

              font: {
                size: 15px;
              }
            }
          }
        }
      }

      .yl-card-box {
        margin-top: 20px;

        .yl-card-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          li {
            min-width: 25%;

            .yl-card-item {
              margin-bottom: 10px;
              margin-right: 10px;
              height: 6em;
              line-height: 6em;
              background-color: #ffffff;
              transition: all .3s ease-in-out;

              &:hover {
                box-shadow: 0px 0px 5px 0px #808080;

                .yl-flex-icon {
                  transition: all .3s ease-in;
                  border-radius: 10px
                }

                .yl-ecs-people {
                  background-color: #0079fe;
                  color: #ffffff
                }

                .yl-ecs-liulanliang {
                  background-color: #ff8d00;
                  color: #ffffff
                }

                .yl-ecs-money {
                  background-color: #f56c6c;
                  color: #ffffff
                }

                .yl-ecs-gouwuche {
                  background-color: #67c23a;
                  color: #ffffff
                }
              }

              h3 {
                line-height: 2.5;

                font: {
                  size: 17px;
                }

                border-bottom: 2px solid rgba(245, 245, 245, 1);

                span {
                  margin-left: 10px
                }
              }

              /* 图标 */
              .yl-flex-icon {
                font-size: 40px;
                margin-left: 10px;
                padding: 20px;
              }

              .yl-ecs-people {
                color: #0079fe;
              }

              .yl-ecs-liulanliang {
                color: #ff8d00;
              }

              .yl-ecs-money {
                color: #f56c6c;
              }

              .yl-ecs-gouwuche {
                color: #67c23a;
              }

              /* 标题 */
              .yl-card-info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                float: right;
                height: 100%;
                margin-right: 20px;

                p {
                  line-height: 1;

                  &:first-child {
                    margin-bottom: 10px;

                    font: {
                      size: 18px;
                      weight: 700;
                    }

                    color: darkgray;
                  }

                  &:last-child {
                    font: {
                      size: 16px;
                      weight: 600;
                    }

                    ;
                  }
                }
              }
            }

            &:nth-last-child(4n+1) {
              .yl-card-item {
                margin-right: 0px;
              }
            }
          }
        }
      }

      .yl-chart-box {
        margin-top: 20px;

        .yl-chart-item {
          background-color: #ffffff;
          margin-bottom: 20px;

          &:nth-child(2) {
            margin-right: 20px;
          }
        }

        .yl-pie-chart,
        .yl-column-chart {
          display: inline-block;
          width: 49%;
        }
      }

      .yl-search-list {
        .el-form {
          .el-form-item {
            margin-bottom: 10px;
          }
        }
      }

      .yl-btn-group {
        margin-bottom: 10px;
      }

      .yl-table-list {
        .el-table {
          margin-bottom: 0;
          border-radius: 15px;
          width: 100%;
        }
      }
    }
  }

  .yl-home-page {
    height: $height;
    width: $width;
    position: relative;

    .el-container {
      width: $width;
      height: $height;

      .yl-flex-container {
        display: flex;
        flex-direction: column;

        .el-header {
          height: 60px;
          width: 100%;

          .el-col {
            height: 100%
          }

          .el-col.yl-col-dropdown {
            text-align: right;
            line-height: 60px;
          }
        }

        .el-header,
        .el-main {
          padding-top: 0;
          background-color: #eff0f0;
        }
      }

      .yl-aside-width {
        min-width: 220px;
      }

      .el-aside {
        background-color: #474281;

        .el-menu {
          border: none;

          .child-submenu {
            .el-submenu {
              .el-submenu__title {
                background-color: rgba($color: #3d3d70, $alpha: 1.0) !important;
              }
            }
          }

          .el-menu.el-menu--inline {
            .el-menu-item {
              background-color: rgba($color: #3d3d70, $alpha: 1.0) !important;
            }
          }

          .el-menu-item.is-active {
            color: rgba($color: #4da2dc, $alpha: 1.0);

            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              background: #4ea8e2;
              height: 100%;
              width: 3px;
            }
          }
        }

        .yl-flex-icon {
          position: relative;
          text-align: center;

          img {
            border-radius: 50px;
            object-fit: cover;
            margin-top: 40px;
            transition: all 0.5s ease-in-out;

            &:hover {
              transform: rotate(360deg);
            }
          }

          p {
            margin: 20px 0;
            color: #fff;

            font: {
              size: 20px;
              weight: 700;
              family: SourceHanSansCN-Bold, SourceHanSansCN;
            }
          }
        }
      }
    }
  }
}

@media(min-width: 1440px) and (max-width: 1920px) {
  .yl-container {
    height: 100%;
    width: $width;
    position: relative;

    .yl-login-top {
      position: absolute;
      padding: 12px 24px;

      span {
        color: #ffffff;

        font: {
          size: 1em;
        }

        ;
      }
    }

    .yl-login-left {
      position: absolute;
      top: 35%;
      left: 20%;
      transform: translate(-50%, -30%);
      margin: auto;

      img {
        width: 700px;
        object-fit: cover;
      }
    }

    .yl-login-right {
      float: right;
      margin-top: 8%;
      margin-right: 10%;
      text-align: center;

      img {
        width: 150px;
      }

      h3 {
        text-align: center;
        display: block;
        line-height: 1.5;

        font: {
          weight: 500;
          size: 2.5em;
        }
      }

      .el-form {
        margin-top: 20px;

        .el-form-item__content {
          margin: 0 !important;
          width: 30em;

          input {
            border: 0;
            border-radius: 0;
            border-bottom: 2px solid rgba($color: #000000, $alpha: 0.32);

            &:focus {
              transition: .5s ease-in-out;
              border-bottom: 2px solid rgba($color: #409EFF, $alpha: 1.0);
            }
          }

          .el-button {
            font: {
              weight: 700;
              size: 20px;
            }
          }
        }
      }
    }

    .yl-main {
      .yl-card-top {
        min-height: 80px;
        background-color: #ffffff;

        display: flex;

        .el-avatar {
          align-self: center;
          width: 60px;
          height: 60px;
          margin: 0 20px;
        }

        p {
          align-self: center;
          text-align: center;

          span {
            &:first-child {
              display: inline-block;
              margin-bottom: 5px;

              font: {
                size: 20px;
                weight: 700;
                family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
              }

              ;
            }

            &:last-child {
              display: inline-block;
              margin-top: 5px;

              font: {
                size: 15px;
              }
            }
          }
        }
      }

      .yl-card-box {
        margin-top: 20px;

        .yl-card-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          li {
            min-width: 25%;

            .yl-card-item {
              margin-bottom: 10px;
              margin-right: 10px;
              height: 8em;
              line-height: 8em;
              background-color: #ffffff;
              transition: all .3s ease-in-out;

              &:hover {
                box-shadow: 0px 0px 5px 0px #808080;

                .yl-flex-icon {
                  transition: all .3s ease-in;
                  border-radius: 10px
                }

                .yl-ecs-people {
                  background-color: #0079fe;
                  color: #ffffff
                }

                .yl-ecs-liulanliang {
                  background-color: #ff8d00;
                  color: #ffffff
                }

                .yl-ecs-money {
                  background-color: #f56c6c;
                  color: #ffffff
                }

                .yl-ecs-gouwuche {
                  background-color: #67c23a;
                  color: #ffffff
                }
              }

              h3 {
                line-height: 2.5;

                font: {
                  size: 17px;
                }

                border-bottom: 2px solid rgba(245, 245, 245, 1);

                span {
                  margin-left: 10px
                }
              }

              /* 图标 */
              .yl-flex-icon {
                font-size: 40px;
                margin-left: 10px;
                padding: 20px;
              }

              .yl-ecs-people {
                color: #0079fe;
              }

              .yl-ecs-liulanliang {
                color: #ff8d00;
              }

              .yl-ecs-money {
                color: #f56c6c;
              }

              .yl-ecs-gouwuche {
                color: #67c23a;
              }

              /* 标题 */
              .yl-card-info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                float: right;
                height: 100%;
                margin-right: 20px;

                p {
                  line-height: 1;

                  &:first-child {
                    margin-bottom: 10px;

                    font: {
                      size: 18px;
                      weight: 700;
                    }

                    color: darkgray;
                  }

                  &:last-child {
                    font: {
                      size: 16px;
                      weight: 600;
                    }

                    ;
                  }
                }
              }
            }

            &:nth-last-child(4n+1) {
              .yl-card-item {
                margin-right: 0px;
              }
            }
          }
        }
      }

      .yl-chart-box {
        margin-top: 20px;

        .yl-chart-item {
          background-color: #ffffff;
          margin-bottom: 20px;

          &:nth-child(2) {
            margin-right: 24px;
          }
        }

        .yl-pie-chart,
        .yl-column-chart {
          display: inline-block;
          width: 49%;
        }
      }

      .yl-search-list {
        .el-form {
          .el-form-item {
            margin-bottom: 10px;
          }
        }
      }

      .yl-btn-group {
        margin-bottom: 10px;
      }

      .yl-table-list {
        .el-table {
          margin-bottom: 0;
          border-radius: 15px;
          width: 100%;
        }
      }
    }
  }

  .yl-home-page {
    height: $height;
    width: $width;
    position: relative;

    .el-container {
      width: $width;
      height: $height;

      .yl-flex-container {
        display: flex;
        flex-direction: column;

        .el-header {
          height: 60px;
          width: 100%;

          .el-col {
            height: 100%
          }

          .el-col.yl-col-dropdown {
            text-align: right;
            line-height: 60px;
          }
        }

        .el-header,
        .el-main {
          padding-top: 0;
          background-color: #eff0f0;
        }
      }

      .yl-aside-width {
        min-width: 248px;
      }

      .el-aside {
        background-color: #474281;

        .el-menu {
          border: none;

          .child-submenu {
            .el-submenu {
              .el-submenu__title {
                background-color: rgba($color: #3d3d70, $alpha: 1.0) !important;
              }
            }
          }

          .el-menu.el-menu--inline {
            .el-menu-item {
              background-color: rgba($color: #3d3d70, $alpha: 1.0) !important;
            }
          }

          .el-menu-item.is-active {
            color: rgba($color: #4da2dc, $alpha: 1.0);

            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              background: #4ea8e2;
              height: 100%;
              width: 3px;
            }
          }
        }

        .yl-flex-icon {
          position: relative;
          text-align: center;

          img {
            border-radius: 50px;
            object-fit: cover;
            margin-top: 40px;
            transition: all 0.5s ease-in-out;

            &:hover {
              transform: rotate(360deg);
            }
          }

          p {
            margin: 20px 0;
            color: #fff;

            font: {
              size: 20px;
              weight: 700;
              family: SourceHanSansCN-Bold, SourceHanSansCN;
            }
          }
        }
      }
    }
  }
}